<template>
  <view class="message-container">
    <!-- 消息列表 -->
    <view class="message-list">
      <view 
        class="message-item" 
        v-for="(item, index) in messageList" 
        :key="index"
        @tap="navigateToChat(item)"
      >
        <image class="avatar" :src="item.avatar" mode="aspectFill"></image>
        <view class="message-content">
          <view class="message-header">
            <text class="name">{{ item.name }}</text>
            <text class="time">{{ item.time }}</text>
          </view>
          <view class="message-body">
            <text class="last-message">{{ item.lastMessage }}</text>
            <view class="unread" v-if="item.unread">{{ item.unread }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const messageList = ref([
  {
    id: 1,
    name: '张先生',
    avatar: 'https://pic1.58cdn.com.cn/nowater/fangfe/n_v2c7dddb6c35834c4f84bc49ddef6f80ab.jpg',
    lastMessage: '您好，请问房子还在出租吗？',
    time: '10:30',
    unread: 2
  },
  {
    id: 2,
    name: '李经理',
    avatar: 'https://pic1.58cdn.com.cn/nowater/fangfe/n_v24cfad0fd4c404a01bd1456459e0df731.jpg',
    lastMessage: '这个岗位的工作时间是怎么安排的？',
    time: '昨天',
    unread: 0
  },
  {
    id: 3,
    name: '王女士',
    avatar: 'https://pic1.58cdn.com.cn/nowater/fangfe/n_v23f13a4c2b5414d9aad4f8a6c8ab32005.jpg',
    lastMessage: '手机还在卖吗？可以便宜点吗？',
    time: '星期一',
    unread: 1
  }
])

const navigateToChat = (item) => {
  uni.navigateTo({
    url: `/pages/chat/chat?id=${item.id}&name=${item.name}`
  })
}
</script>

<style scoped>
.message-container {
  background: #fff;
}

.message-item {
  display: flex;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
  align-items: center;
}

.avatar {
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.message-content {
  flex: 1;
}

.message-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.name {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}

.time {
  font-size: 24rpx;
  color: #999;
}

.message-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.last-message {
  font-size: 28rpx;
  color: #666;
  width: 500rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unread {
  background-color: #ff552e;
  color: #fff;
  font-size: 24rpx;
  min-width: 32rpx;
  height: 32rpx;
  padding: 0 8rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style> 